<template>
<div class="shopcart">
  <div class="carts">
    <div class="header">
      <div class="header-left">购物车（共{{number}}份）</div>
      <div class="header-right" @click="clearCart">
        <span class="iconfont icon-clear"></span>清空购物车
      </div>
    </div>

    <div v-show="number>0">
      <div class="cart-mess"  v-if="userInfo != ''">
        <div class="mess-left">
          <img :src="userInfo.headimgurl" class="mess-img">
          {{userInfo.nickname}}
        </div>
        <div class="mess-right">共{{number}}份</div>
      </div>
      <div class="order">
        <div class="order-list" v-for="(goods,index) in goodsList" :key="index">
          <div class="order-dish">
            <div class="dish-name">{{goods.dishes_name}}
              <div class="dish-spec" v-if="goods.spec">
                (<span v-for="(spec,index) in goods.spec" :key="index">{{spec.spec_name}}，</span>)
              </div>
            </div>
            
            <div class="dish-mess">
              <span class="dish-price" v-if="goods.spec">{{((goods.price * goods.discount + specPrice(goods.spec))*goods.count).toFixed(2)}}</span>
              <span class="dish-price" v-else>{{(goods.price * goods.discount * goods.count).toFixed(2)}}</span>
              <div class="controls">
                <shop-control :food="goods"></shop-control>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="order note" v-if="!addFoods">
        <div class="order-list">
          <div class="order-dish">
            <span class="dish-name">就餐人数:</span>
            <input class="order-note" type="text" placeholder="输入就餐人数"  v-model="people"/>
          </div>
        </div>
        <div class="order-list">
          <div class="order-dish">
            <span class="dish-name">备注:</span>
            <input class="order-note" type="text" placeholder="输入备注"  v-model="note"/>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车为空 -->
    <div class="empty" v-show="number==0">
      <div class="iconfont icon-gouwuche empty-icon"></div>
      <div class="empty-text">购物车空空的呢，快去点餐吧～</div>
    </div>
    <!-- 底部空隙 -->
    <div class="space"></div>
  </div>

  

  <div class="shop-nav">
    <shop-menu></shop-menu>
    <div :class="number==0 ? 'buy':'buy canbuy'" @click="buy">
      <span v-if="addFoods">我要加菜</span>
      <span v-else>{{number==0?'请选择菜式':'选好啦'}}</span>
      <div class="buy-price" v-show="addPrice">总计：¥{{addPrice}}</div>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
import shopControl from '../dishes/components/control'
import shopMenu from '../dishes/components/menu'

export default {
  name: 'shopCartMess',
  components: {
    shopControl,
    shopMenu
  },
  data() {
    return {
      isOpen: this.$route.query.isOpen,
      shop_id: this.$route.query.shop_id,
      room_desk_id: this.$route.query.room_desk_id,
      id: this.$store.state.id,
      userInfo: '', //用户信息
      note: '',   //下单备注
      people: 1,   //就餐人数
      addFoods: false   //是否加菜
    }
  },
  computed: {
    addPrice() {
      return this.$store.getters.goodsPrice
    },
    goodsList() {
      return this.$store.state.goodsList
    },
    number() {
      return this.$store.getters.goodsNumber
    },
    // addFoods() {
    //   return this.$store.state.addFoods
    // }
  },
  mounted() {
    //获取用户信息
    axios.get('api/scan_user_info').then( res => {
      console.log(res)
      console.log(this.userInfo)
      if(res.data.code == 200) {
        this.userInfo = res.data.data
      }
    }).catch( error => {
      console.log(error)
    })
  },
  activated() {
    //是否加菜
    axios.post('api/scan_show_dish',{'id': this.id}).then( res => {
      console.log(res)
      if(res.data.code == 200) {
        this.$store.commit('isAddFoods')
        this.addFoods = true
      }
    }).catch( error => {
      console.log(error)
    })
  },
  methods: {
    clearCart() {
      this.$store.commit('clearCart');
    },
    //计算多规格价
    specPrice(spec){
      if(spec){
        let price = 0;
        spec.forEach( val => {
          price += Number(val.spec_price)
        });
        return price
      }else{
        return 0
      } 
    },

    //购买
    buy() {
      if(this.isOpen==0) {
        this.$toast('店铺已打烊，暂时不能下单')
      }else {
        if(this.number > 0) { //购物车存在商品
          let cart={
            "shop_id": this.shop_id,
            "room_desk_id": this.room_desk_id
          }
          let dish = []
          this.goodsList.forEach( res => {
            let list = {
              'dishes_id': res.id,
              'dishes_name': res.dishes_name,
              'goods_number': res.count,
              'price': res.price,
              'is_attr': res.is_attr
            }
            if(res.spec) {
              let spec_price = 0
              let sell_price = 0
              let arr =[]
              res.spec.forEach( res => {
                spec_price += Number(res.spec_price)
                arr.push(res.spec_name+'|'+res.spec_price)
              })
              let spec = arr.join(',')
              sell_price = (Number(res.price) * Number(res.discount) + spec_price) * res.count
              list.sell_price = sell_price
              list.spec = spec
            }else {
              let sell_price = Number(res.price) * Number(res.discount) * res.count
              list.sell_price = sell_price
              list.spec = ''
            }
            dish.push(list)
          })
          cart.dish = dish
          console.log(JSON.stringify(cart))

          //判断是否加菜
          let url = ''
          if(this.addFoods){
            url = "scan_add_dishes"
            let that = this
            that.$showModal('你确定要加菜吗？',true,true,function() {
              axios.post('api/'+url,{'cart':cart}).then( res => {
                console.log(res)
                if(res.data.code == 200) {
                  that.clearCart()
                }
                that.$toast(res.data.info)
              }).catch( error => {
                console.log(error)
              })
            },function(){})
          }else{
            url = "scan_add_order";
            cart.number_meals = this.people;
            cart.note = this.note
            let that = this
            that.$showModal('你确定要下单吗？',true,true,function() {
              axios.post('api/'+url,{'cart':cart}).then( res => {
                console.log(res)
                if(res.data.code == 200) {
                  that.clearCart()
                }
                that.$toast(res.data.info)
              }).catch( error => {
                console.log(error)
              })
            },function(){})
          }
        }
      }
      
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .carts
    background #f1f1f1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    .space
      height 2rem;
      background #f1f1f1
    .header
      padding 0 0.3rem
      height 0.8rem
      line-height 0.8rem
      font-size 0.32rem
      background #f8f8f8
      border-bottom 0.01rem solid #dfdfdf
      .header-left
        float left
        position relative
        text-indent 0.16rem
        &::before
          content ''
          position absolute
          height 0.3rem
          width 0.05rem
          background $themeColor
          left 0
          top 0.24rem
      .header-right
        float right
        color #999
        span
          margin-right 0.02rem
    .cart-mess
      height 0.7rem
      line-height 0.7rem
      padding 0 0.2rem
      font-size 0.28rem
      background #fcfcfc
      width 100%
      display flex
      justify-content space-between
      .mess-left
        color #555
        .mess-img
          width 0.4rem
          height 0.4rem
          border-radius 50%
          overflow hidden
          border 1px solid #ccc
      .mess-right
        color #999
    .order
      background #ffffff
      &.note
        margin-top 0.4rem
      .order-list
        padding 0.18rem 0.3rem
        position relative
        &::after
          content ''
          position: absolute
          height: 2px
          -webkit-transform: scale(1,.5)
          transform: scale(1,.5)
          -webkit-transform-origin: 0 bottom
          transform-origin: 0 bottom
          bottom: 0
          left 0.3rem
          right 0
          border-bottom: 1px solid #e1e1e1
        .order-dish
          padding 0.12rem 0
          font-size 0
          display flex
          align-items center
          justify-content space-between
          .dish-name
            display inline-block
            font-size 0.3rem
            width 3.8rem
            word-wrap:break-word
            .dish-spec
              display inline-block
              font-size 0.24rem
              color #777
          .order-note
            width 6rem
            height 0.5rem
            text-align right
            font-size 0.3rem
            font-family 'PingFang SC'
          .dish-mess
            display flex
            align-items center
            .dish-price
              display inline-block
              width 1.2rem
              text-align center
              font-weight bold
              color $fontColor
              font-size 0.3rem
              &::before
                content '¥'
                font-size 10px
            .controls
              position relative
              width 1.4rem
              float right
  .shop-nav
    position: fixed;
    z-index: 19;
    right: 15px;
    bottom: 15px;
    left: 15px;
    height: 0.8rem;
    display flex
    justify-content space-between
    .buy
      min-width 2.5rem
      height 0.8rem
      background rgba(32,29,26,.82)
      border-radius 0.4rem
      color #fff;
      line-height 0.8rem
      font-size 0.3rem
      position relative
      text-align center
      &.canbuy
        background $themeColor
        color #ffffff
      .buy-price
        width 2.5rem
        height 0.7rem
        line-height 0.7rem
        border-radius 0.35rem
        border 0.02rem solid #dddddd
        position absolute
        left 0
        bottom 1rem
        color $fontColor
        background #ffffff
        font-size 0.28rem
        box-shadow: 1px 1px 3px #dddddd;
        &::before
          content ''
          position absolute
          left 50%;
          bottom -0.28rem
          margin-left -0.07rem
          border-width 0.14rem
          border-color #ffffff transparent transparent transparent
          border-style solid
  .empty
    margin-top 150px
    color #999
    text-align center
    .empty-icon
      font-size 100px
      color #bbb
    .empty-text
      font-size 16px
      margin-top 20px
      


</style>